<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>几个图片展示样式</title>

    <link href="css/demo.css" rel="stylesheet" />
    <link href="css/ionicons.min.css" rel="stylesheet" />
    <link href="css/flutter.css" rel="stylesheet" />
  </head>
  <body>
    <section>
      <div class="flutter-container">
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_1">
            <img src="images/10.jpg" alt="sample7" />
            <div class="overlay">
              <a href="#lightbox-1"><i>a</i></a>
              <a href="#lightbox-1"><i>a</i></a>
              <a href="#lightbox-1"><i>a</i></a>
            </div>
          </figure>
          <div class="flutter-lightbox" id="lightbox-1">
            <a href="#" class="close-me"></a>
            <img src="images/01.jpg" alt="sample7" />
          </div>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_2">
            <img src="images/12.jpg" alt="sample7" />
            <div class="overlay">
              <a href="#lightbox-2"><i>a</i></a>
            </div>
          </figure>
          <div class="flutter-lightbox" id="lightbox-2">
            <a href="#" class="close-me"></a>
            <img class="flutter-full-img" src="images/02.jpg" alt="sample7" />
          </div>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_3">
            <img src="images/11.jpg" alt="sample7" />
            <div class="overlay">
              <a href="#lightbox-3"><i>a</i></a>
            </div>
          </figure>
          <div class="flutter-lightbox" id="lightbox-3">
            <a href="#" class="close-me"></a>
            <div class="flutter-full-content">
              <h2>Better Represent your Art Work.</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                rhoncus ut, imperdiet a, venenatis vitae, justo.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="flutter-container">
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_4">
            <img src="images/17.jpg" alt="sample7" />
            <div class="overlay">
              <h2><span>Responsive</span> Design</h2>
              <p>Fully responsive and work well.</p>
              <a href="#"></a>
            </div>
          </figure>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_5">
            <img src="images/09.jpg" alt="sample7" />
            <div class="overlay">
              <h2><span>Responsive</span> Design</h2>
              <p>Fully responsive and work well.</p>
              <a href="#"></a>
            </div>
          </figure>
        </div>
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_6">
            <img src="images/08.jpg" alt="sample7" />
            <figcaption>
              <h2>We Provide <span>Aweseom</span> servcies</h2>
              <p>Create services all in one place</p>
              <a href="#"></a>
            </figcaption>
          </figure>
        </div>
      </div>
    </section>

    <section>
      <div class="flutter-container">
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_7">
            <img src="images/02.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <h2>Where <span>are</span> you from?</h2>
              </div>
              <div class="overlay">
                <p>How you find our item? Let's Us Know</p>
              </div>
              <a href="#"></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_8">
            <img src="images/04.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <h2>
                  This is <span>real</span> fun of <span>Make</span> Effects
                </h2>
              </div>
              <div class="overlay"><p>It work well on all devices</p></div>
              <a href="#"></a>
            </figcaption>
          </figure>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_9">
            <img src="images/13.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <a href="#lightbox-9"><i>a</i></a>
                <a href="#lightbox-9"><i>a</i></a>
                <a href="#lightbox-9"><i>a</i></a>
              </div>
              <h2>What is best <span>for</span> your web.</h2>
            </figcaption>
          </figure>
          <div class="flutter-lightbox" id="lightbox-9">
            <a href="#" class="close-me"></a>
            <div class="flutter-small-content">
              <h2>Better Represent your Art Work.</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
                commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
                quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                rhoncus ut, imperdiet a, venenatis vitae, justo.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="flutter-container">
        <div class="col-flut-2">
          <figure class="Flutters flutEffect_10">
            <img src="images/11.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <a href="#"><i>a</i></a>
                <a href="#"><i>a</i></a>
                <a href="#"><i>a</i></a>
              </div>
              <h2>We will do <span>our</span> best</h2>
            </figcaption>
          </figure>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_11">
            <img src="images/03.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <h3>Why?</h3>
              </div>
              <div class="overlay">
                <div class="icons">
                  <a href="#"><i>a</i></a>
                  <a href="#"><i>a</i></a>
                  <a href="#lightbox-4"><i>a</i></a>
                </div>
              </div>
            </figcaption>
            <div class="center">
              <i>a</i>
            </div>
          </figure>
          <div class="flutter-lightbox" id="lightbox-4">
            <a href="#" class="close-me"></a>
            <iframe
              src="images/13.jpg"
              width="100%"
              height="100%"
              frameborder="0"
              style="border: 0"
              allowfullscreen
            ></iframe>
          </div>
        </div>

        <div class="col-flut-2">
          <figure class="Flutters flutEffect_12">
            <img src="images/01.jpg" alt="sample7" />
            <figcaption>
              <div class="overlay">
                <img src="images/01.jpg" alt="sample7" />
              </div>
              <h2>Flutter <span>Effects</span></h2>
            </figcaption>
            <a href="#"></a>
          </figure>
        </div>
      </div>
    </section>
  </body>
</html>
